<template>
  <div>
    <vxe-grid
      show-overflow
      auto-resize
      round
      ref="table"
      class="virtual-table"
      :size="size"
      :height="height"
      :loading="loading"
      :border="bordered"
      :stripe="!treeConfig ? striped : false"
      :show-footer="showFooter"
      :data="dataSource"
      :columns="columns"
      :row-config="rowConfig"
      :tree-config="treeConfig"
      :checkbox-config="checkboxConfig"
      :edit-config="editConfig"
      :seq-config="seqConfig"
      :footer-method="footerMethod"
      :footer-span-method="footerSpanMethod"
      @checkbox-all="checkboxAll"
      >
        <template v-for="name in Object.keys($scopedSlots)" v-slot:[name]="{row}">
          <slot :name="name" v-bind="{row}"></slot>
        </template>
        <template #empty>
          <span>
            <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
              <g transform="translate(0 1)" fill="none" fillRule="evenodd"><ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
              <g fillRule="nonzero" stroke="#D9D9D9">
                <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
              </g>
              </g>
            </svg>
            <p style="margin-top: 8px; color: rgba(0,0,0, 0.25);">暂无数据</p>
          </span>
        </template>
    </vxe-grid>
  </div>
</template>

<script>
import './virtual-table-style.css'
export default {
  name: 'VirtualTable',
  props: {
    size: String,
    columns: Array,
    dataSource: Array,
    loading: Boolean,
    height: {
      type: [Number, String],
      default: 300
    },
    striped: {
      type: Boolean,
      default: true
    },
    bordered: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: false
    },
    rowConfig: {
      type: Object,
      default: () => ({keyField: 'id', useKey: true, isHover: true})
    },
    treeConfig: {
      type: Object
    },
    checkboxConfig: {
      type: Object
    },
    editConfig: {
      type: Object,
      default: () => ({trigger: 'click', mode: 'cell'})
    },
    seqConfig: {
      type: Object
    },
    footerMethod: {
      type: Function
    },
    footerSpanMethod: {
      type: Function
    }
  },
  data () {
    return {
    }
  },
  watch: {
    dataSource(val) {
      this.dataSource = val
    }
  },
  methods: {
    checkboxAll({checked, e}) {
      this.$emit('checkboxAll', checked)
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="less">
  /deep/.vxe-table--render-default .vxe-body--row.row--stripe {
    background-color: #fafafa;
  }
  /deep/.vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before {
    border-width: 1px;
  }
  /deep/.vxe-table--render-default .vxe-body--row.row--hover, /deep/.vxe-table--render-default .vxe-body--row .row--hover.row--stripe {
    background-color: @primary-1;
  }
  /deep/.vxe-table--render-default .vxe-body--row.row--checked, /deep/.vxe-table--render-default .vxe-body--row.row--stripe.row--checked {
    background-color: @primary-1;
  }
  /deep/.vxe-button--content, .vxe-button--icon, .vxe-button--loading-icon {
    vertical-align: top;
  }
  /deep/.vxe-button.size--mini.type--button {
    height: 20px;
  }
  /deep/.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon:before {
    color: @primary-color;
    background-color: @primary-color;
    border-color: @primary-color;
  }
  /deep/.is--checked.vxe-custom--option .vxe-checkbox--icon:before, /deep/.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon:before, /deep/.is--checked.vxe-table--filter-option .vxe-checkbox--icon:before, /deep/.is--indeterminate.vxe-custom--option .vxe-checkbox--icon:before, /deep/.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon:before, /deep/.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon:before, /deep/.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon:before, /deep/.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon:before {
    color: @primary-color;
    background-color: @primary-color;
    border-color: @primary-color;
  }
  /deep/.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon:before {
    color: @primary-color;
    background-color: @primary-color;
    border-color: @primary-color;
  }
  /deep/.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon:before {
    border-color: @primary-color;
  }
  /deep/.vxe-table--render-default, /deep/.vxe-cell--title, /deep/.vxe-table--footer-wrapper {
    color: @text-color;
  }
</style>